<template>
  <el-input ref="inputRef" v-model="inputValue" type="textarea" :autosize="{ minRows: 1, maxRows: 3 }" :placeholder="placeholder"
    prefix-icon="search" clearable @focus="getInputFocus($event)" @blur="blurInput">
  </el-input>
</template>

<script name="MultiInput" setup>
import { nextTick, reactive, toRefs } from 'vue'

const props = defineProps({
  modelValue: {
    type: [Array, String],
    default: () => []
  },
  placeholder: {
    type: String,
    default: ''
  }
})

const emits = defineEmits(["update:modelValue"]);
const inputValue = ref('')

watch(
  () => props.modelValue,
  (val) => {
    if (!val.length || !val) {
      inputValue.value = ''
    } else {
      inputValue.value = val.join('\n');
    }
  }
)

const inputRef = ref()
const inputFocus = ()=>{
  nextTick(()=>{
    inputRef.value.focus()
  })
}

const getInputFocus = (event) => {
  event.currentTarget.select();
}

defineExpose({ inputFocus })


const blurInput = () => {
  const val = inputValue.value ? inputValue.value.split('\n').filter(d => d) : []
  emits('update:modelValue', val)
}
</script>

<style lang="scss"></style>